<template>
  <a-modal
      v-model:visible="visible"
      title="添加管理员账户"
      centered
      @ok="addUser"
      @cancel="close"
      okText="添加"
      cancelText="取消"
  >
    <a-form :label-col="{span: 4}">
      <a-form-item label="用户名">
        <a-input v-model:value="form.name"></a-input>
      </a-form-item>
      <a-form-item label="用户邮箱">
        <a-input v-model:value="form.email"></a-input>
      </a-form-item>
      <a-form-item label="密码">
        <a-input-password v-model:value="form.password"></a-input-password>
      </a-form-item>
      <a-form-item label="确认密码">
        <a-input-password v-model:value="form.check_password"></a-input-password>
      </a-form-item>
      <a-form-item label="账户等级">
        <a-select v-model:value="form.level">
          <a-select-option value="0" title="管理员">管理员</a-select-option>
        </a-select>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup>
import {ref} from "vue";
import {message, notification} from "ant-design-vue";
import {apiPost} from "../../../fentch";

defineProps({
  visible: {
    type: Boolean,
    required: true,
    default: false
  }
})

const emit = defineEmits(['close', 'ok'])

const form = ref({
  name: '',
  email: '',
  password: '',
  check_password: '',
  level: '0'
})

const addUser = () => {
  // 检查用户密码与确认密码是否符合
  if (form.value.name === ''
      || form.value.email === ''
      || form.value.password === ''
      || form.value.check_password=== '') {
    message.error('请完成填写用户信息')
    return;
  }
  if (form.value.password !== form.value.check_password) {
    message.error('密码不符合')
    return
  }
  // 执行注册用户的请求
  apiPost('/users/admin', form.value).then(res => {
    if (res.data.code === 0) {
      emit('ok')
      return
    }
    message.error(res.data.message)
  })
}

const close = () => {
  emit('close')
}
</script>

<style scoped>

</style>